<template>
  <el-aside
    width="140px"
    class="hui-sidebar">
    <el-container class="hui-h-100vh">
      <el-header height="auto" class="hui-sidebar__header">
        <h-image
          :src="user.imgUrl"
          size="40px"
          borderRadius="50%"
          border
          mode="background-image">
        </h-image>
        <div class="hui-sidebar__header__name">@ {{ user.corpName }}</div>
      </el-header>
      <el-main class="hui-sidebar__main">
        <el-scrollbar class="hui-h-100" wrap-class="hui-overflow-x-hidden">
          <el-menu
            :default-active="defaultActive"
            class="hui-sidebar__menu"
            router
            background-color="#324157"
            text-color="#b4bccc">
            <el-menu-item :index="item.url" :key="item.url" v-for="item in menu">
              <h-icon :icon="item.icon" size="16px" class="hui-mr-8px"></h-icon>
              <template slot="title">{{ item.title }}</template>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>

      </el-main>
      <el-footer class="hui-sidebar__footer" height="112px">
        <el-menu
          class="hui-sidebar__menu"
          router
          background-color="#324157"
          text-color="#b4bccc">
          <el-menu-item :index="item.url" :key="item.url" v-for="item in action">
            <h-icon :icon="item.icon" size="16px" class="hui-mr-8px"></h-icon>
            <template slot="title">{{ item.title }}</template>
          </el-menu-item>
        </el-menu>
      </el-footer>
    </el-container>

  </el-aside>

</template>

<script>
export default {
  name: 'hpro-sidebar',
  componentName: 'hpro-sidebar',
  data () {
    return {
      menu: [
        {
          title: '概况',
          icon: 'icon-televisionguide',
          url: '/home/overview'
        },
        {
          title: 'i应用',
          icon: 'icon-apps',
          url: '/home/iapp'
        }
        // {
        //   title: '订单',
        //   icon: 'icon-clipboardtext',
        //   url: ''
        // },
        // {
        //   title: '商品',
        //   icon: 'icon-ticket',
        //   url: ''
        // },
        // {
        //   title: '门店',
        //   icon: 'icon-store',
        //   url: ''
        // },
        // {
        //   title: '小程序',
        //   icon: 'icon-xiaochengxu',
        //   url: ''
        // },
        // {
        //   title: '设置',
        //   icon: 'icon-settings',
        //   url: ''
        // }
        // {
        //   title: '客户',
        //   icon: 'icon-walletmembership',
        //   url: '/home/user'
        // },
        // {
        //   title: '营销',
        //   icon: 'icon-bullhorn',
        //   url: '/home/marketing'
        // },
        // {
        //   title: '商城',
        //   icon: 'icon-cart',
        //   url: '/home/mall'
        // },
        // {
        //   title: '公众号',
        //   icon: 'icon-weixin',
        //   url: '/home/weixin'
        // },
        // {
        //   title: '财务',
        //   icon: 'icon-cashusd',
        //   url: '/home/finance'
        // },
        // {
        //   title: '设置',
        //   icon: 'icon-settings',
        //   url: '/home/setting'
        // }
        // {
        //   title: '公众号',
        //   icon: 'icon-weixin',
        //   url: '/home/weixin'
        // },
        // {
        //   title: '营销活动',
        //   icon: 'icon-bullhorn',
        //   url: '/home/market'
        // },
        // {
        //   title: '微商城',
        //   icon: 'icon-cart',
        //   url: '/home/mall'
        // },
        // {
        //   title: '门店',
        //   icon: 'icon-store',
        //   url: '/home/store'
        // },
        // {
        //   title: '开放API',
        //   icon: 'icon-xml',
        //   url: '/home/open'
        // },
        // {
        //   title: '设置',
        //   icon: 'icon-settings',
        //   url: '/home/setting'
        // }
      ],
      action: [
        {
          title: '切换品牌',
          icon: 'icon-exittoapp',
          url: '/account/corp'
        },
        {
          title: '退出',
          icon: 'icon-logout',
          url: '/account/logout'
        }
      ],
      defaultActive: '',
      user: {
        imgUrl: this.$random.randomEnum(this.$store.state.image),
        nick: '昵称昵称昵称昵称昵称',
        corpName: 'coco都可'
      }
    }
  },
  created () {
    this.getRouteMatched()
  },
  methods: {
    getRouteMatched () {
      let routeMatched = this.$route.matched
      // console.log(routeMatched[1].path)
      this.defaultActive = routeMatched[1].path
    }
  },
  watch: {
    '$route': 'getRouteMatched'
  }
}
</script>

<style lang="less">
  @import "../../common/h-theme/_variable.less";

  .hui-sidebar {
    flex: none;
    background-color: #324157;
    color: @--color-text-placeholder;
    font-size: @--font-size-base;
  }

  .hui-sidebar__header {
    text-align: center;
    box-shadow: @--box-shadow-base;
    padding: 15px 20px;
    z-index: @zindex-navbar-fixed;
  }

  .hui-sidebar__header__name {
    margin-top: 5px;
    .setEllip();
  }

  .hui-sidebar__main {
    padding: 0;
    height: calc(100vh - 60px - 112px);
  }

  .hui-sidebar__menu {
    border-right: none;
  }

  .hui-sidebar__footer {
    padding: 0;
    height: auto;
    z-index: @zindex-navbar-fixed;
    box-shadow: @--box-shadow-dark;
  }
</style>
